<template>
    <div class="header">
        <div class="header_login">
             <img src="/img/yunangLogo.png" alt="">
             <span class="loginText">云昂科技工作室</span>
        </div>
        <div class="text">
            <span :class="activePath === path[i]?'activePath':''" v-for="(item,i) in maindata" :key="i" @click="push(i)">{{item}}</span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            maindata:['首页','近期产品','关于我们','加入我们','公告'],
            // 跳转地址
            path:['home','product','aboutUs','joinUs','notice'],
            activePath:'',
        }
    },
    created(){
    //   this.activePath = 'home'
      this.activePath = localStorage.getItem('activePath') || 'home'
    },
    methods:{
        push(i){
            this.activePath = this.path[i]
            this.$router.push(`${this.path[i]}`)
            localStorage.setItem('activePath',this.path[i])
        },
    },
    watch:{
        '$store.state.activePath':{
            immediate:true,
            handler() {
                let path = this.$store.state.activePath
                let paths =  path.split('').slice(1).join('')
                this.activePath = paths
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.header{
    margin:0 1.25rem;
    display: flex;
    justify-content: space-between;
    line-height: 6.875rem;
    border-bottom: 1px solid #ccc;
    .header_login{
       img{
        width: 6.25rem;
        height: 6.25rem;
        margin-top:-1.25rem;
        vertical-align: middle;
      }
      .loginText{
        font-family:"华文彩云";/*设置字体*/
		font-size:40px; /*设置字体大小*/
		font-weight:bolder; /*设置字体粗细*/
		-webkit-text-stroke:.0625rem #1b425c;        /*文字描边*/
		// -webkit-text-fill-color:transparent; 
        -webkit-text-fill-color:#1b425c; 
        letter-spacing: .625rem;   /*设置文字的填充颜色*/
        // margin-left:1.875rem;
        // font-size: 1.25rem;
        // font-family: Wawati SC;
      }

    }
    .text{
        // line-height: 90px;
        margin-right: 20px;
        span{
            margin-right: 30px;
            cursor:pointer;
        }
        span:hover{
            color: #0099FF;
            text-shadow:2px 2px 12px #0a94f0;
        }
        .activePath{
            color: #0099FF;
            text-shadow:2px 2px 12px #0a94f0;
        }
    }
    .addUs{
        display: block;
        margin-top:30px;
        width: 150px;
        height: 50px;
        background-color: #0099FF;
        text-align: center;
        line-height: 50px;
        border-radius: 5px;
        color: #fff;
        font-size: 18px;
        cursor:pointer;
    }
}
</style>